import React, {useEffect, useState} from 'react'
// useEffect 模拟实现 类式组件中的生命周期方法(钩子)
export default function EffectCom() {
  let [count, setCount] = useState(100);
  let [zan, setZan] = useState(0);
  //模拟 componentDidMount 组件挂载完成之后自动执行
  // useEffect(() => {
  //   console.log('组件挂载完毕...');
  // }, []);

  // //模拟 componentWillUnmount 组件将要卸载之前自动执行
  // useEffect(() => {
    
  //   return () => { 
  //     //该函数会在组件卸载之前, 自动执行
  //     console.log('组件卸载完成...');
  //   }
  // }, []);

  //组合写法
  // useEffect(() => { 
  //   console.log('组件挂载完毕...');

  //   return () => { 
  //     //该函数会在组件卸载之前, 自动执行
  //     console.log('组件卸载完成...');
  //   }
  // }, []);

  //模拟 componentDidUpdate 与 componentDidMount  该方式使用的相对较少
  // useEffect(() => {
  //   console.log('该回调会在组件挂载与组件更新之后, 自动执行')
  // });

  //
  useEffect(() => {
    console.log('该回调会在组件挂载之后执行, 而且当 count 状态的值发生变化之后, 也会执行')
  }, [count]); // 第二个参数在设置回调执行的依赖数组 

  return (
    <div>
      <h2>{count}</h2>
      <button onClick={() => {
        //更新状态
        setCount(count + 1);
      }}>新增</button>

      <hr />
      <h2>点赞数: {zan}</h2>
      <button onClick={() => {
        setZan(zan+1);
      }}>点赞</button>
    </div>
  )
}
